<template>
  <view class="tologin-box">
    <uni-icons type="contact-filled" size="100"></uni-icons>
    <button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
    <text>登录后尽享更多权益</text>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
  data() {
    return {};
  },

  methods: {
    ...mapMutations('myAddress', ['updataUserInfo']),
    getUserInfo(e) {
      if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了授权!');
      console.log(123, e.detail.userInfo);
      this.updataUserInfo(e.detail.userInfo);
      this.getToken(e.detail.userInfo);
    },
    async getToken(info) {
      const [err, res] = await uni.login().catch(err => err);
      if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败!');
      const params = {
        code: res.code,
        encryptedData: info.encryptedData,
        iv: info.iv,
        rawData: info.rawData,
        signature: info.signature
      };
      // 换取 token
      const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', params);
      console.log(loginResult)
      if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！');
      uni.$showMsg('登录成功');
      //接口错误,就不进行下一步存储token了
    }
  }
};
</script>

<style lang="scss">
.tologin-box {
  height: 750rpx;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
  &::after {
    content: ' ';
    display: block;
    height: 80rpx;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .uni-icons {
    color: #afafaf;
  }
  button {
    width: 100%;
    background-color: #c00000;
    border-radius: 45rpx;
    margin: 20rpx 0;
  }
  text {
    color: #999;
    font-size: 26rpx;
  }
}
</style>
